<template>
	<view>
		<uni-row>
			<uni-col v-for="(c, i) in columns" v-show="(!expand && c.showUnExpand) || expand || !showExpand" :key="i" :span="c.span * 12 || 12">
				<view v-if="!c.tableVisible">
					<view v-if="!c[formItem.formType]" class="item">
						{{ c[formItem.label] }}：{{
							(String(data[c[formItem.prop]]) !== 'null' && String(data[c[formItem.prop]]) !== 'undefined' && String(data[c[formItem.prop]])) || '-'
						}}
					</view>
					<view v-else-if="['fileList', 'imageList'].includes(c[formItem.formType])">
						<view>{{ c[formItem.label] }}：</view>
						<file-list :fileType="c[formItem.formType]" :fileList="data[c[formItem.prop]]"></file-list>
					</view>
					<view v-else-if="['header'].includes(c[formItem.formType])">
						<header-title :title="c.value"></header-title>
					</view>
					<view v-else-if="['headerEqu'].includes(c[formItem.formType])">
						<header-title :title="c[formItem.label] + '：' + data[c[formItem.prop]]"></header-title>
					</view>
					<view v-else-if="['select'].includes(c[formItem.formType])" class="item">
						<view>{{ c[formItem.label] }}：{{ findName(c.options, data[c[formItem.prop]]) }}</view>
					</view>
					<view v-else-if="['selectTree'].includes(c[formItem.formType])" class="item">
						<view>{{ c[formItem.label] }}：{{ findTreeName(c.options, data[c[formItem.prop]]) }}</view>
					</view>
					<view v-else-if="['percent'].includes(c[formItem.formType])" class="item">
						<view>{{ c[formItem.label] }}：{{ data[c[formItem.prop]] + '%' }}</view>
					</view>
					<view v-else-if="['seconds'].includes(c[formItem.formType])" class="item">
						<view>{{ c[formItem.label] }}：{{ convertSecondsToFormat(data[c[formItem.prop]]) }}</view>
					</view>
					<view v-else-if="['add'].includes(c[formItem.formType])" class="item">
						<view>{{ c[formItem.label] }}：{{ data[c.dataIndex] + '/' + data[c.dataIndex2] || '-' }}</view>
					</view>
					<view v-else-if="['workOrder'].includes(c[formItem.formType])" class="item">
						<view>
							<span style="padding-right: 20rpx">
								{{ c[formItem.label] }}：
								<span :style="{ color: c.color || '#6A6A6A' }">{{ data[c[formItem.prop]] }}</span>
							</span>
							<span @click="c.clickFn ? c.clickFn(data) : (() => {})()">
								<workOrderTag v-if="data[c[formItem.prop]] && data[c[formItem.prop]] !== '无需申请'" :workOrder="data[c[formItem.prop]] || ''" />
							</span>
						</view>
					</view>
					<view v-else-if="['selectMore'].includes(c[formItem.formType])" class="item">
						<view>
							{{ c[formItem.label] }}：{{
								data[c[formItem.prop]] &&
								data[c[formItem.prop]]
									.split(',')
									.map((t) => $findName(c.options, t))
									.join(';')
							}}
						</view>
					</view>
				</view>
			</uni-col>
		</uni-row>
		<view class="trigger" v-if="showExpand">
			<uni-icons type="left" size="20" :class="expand ? 'expand' : ''" @click="expand = !expand"></uni-icons>
		</view>
	</view>
</template>

<script>
import { findTreeName, findName, convertSecondsToFormat } from '@/utils/utils.js';
export default {
	props: {
		showExpand: {
			type: Boolean,
			default: false
		},
		columns: {
			type: Array,
			default: () => []
		},
		data: {
			type: Object,
			default: () => ({})
		},
		formItem: {
			type: Object,
			default: () => ({
				label: 'title',
				prop: 'dataIndex',
				formType: 'valueType'
			})
		}
	},
	data() {
		return {
			expand: false,
			findTreeName: findTreeName,
			findName: findName,
			convertSecondsToFormat: convertSecondsToFormat
		};
	},
	methods: {}
};
</script>

<style scoped lang="scss">
.item {
	margin-bottom: 10rpx;
}

.trigger {
	display: flex;
	justify-content: center;

	.uni-icons {
		color: #16a7f0 !important;
		transform: rotateZ(-90deg);

		&.expand {
			transform: rotateZ(90deg);
		}
	}
}
</style>
